<template>
  <EditPopup ref="editRef" @success="getLists"/>
  <div>
    <el-card class="!border-none" shadow="never">
      <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
        <el-form-item label="设备名称">
          <el-input
              class="w-[280px]"
              v-model="queryParams.deviceName"
              clearable
              @keyup.enter="resetPage"
          />
        </el-form-item>
        <el-form-item label="安装时间">
          <daterange-picker
              v-model:startTime="queryParams.startTime"
              v-model:endTime="queryParams.endTime"
          />
        </el-form-item>
        <el-form-item label="设备状态" prop="omStatus">
          <el-select v-model="queryParams.deviceStatus" placeholder="请选择">
            <el-option label="全部" value=""/>
            <el-option label="在线" value="1"/>
            <el-option label="异常" value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <div>
        <el-button v-perms="['device:add']" type="primary" @click="handleAdd()">
          <template #icon>
            <icon name="el-icon-Plus"/>
          </template>
          新增
        </el-button>
      </div>
      <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
        <el-table-column label="设备名称" prop="deviceName" min-width="120"/>
        <el-table-column label="设备编号" prop="address" min-width="120"/>
        <el-table-column label="所属站点" prop="siteName" min-width="120"/>
        <el-table-column label="设备状态" prop="deviceState" min-width="100">
          <template #default="{row}">
            <span v-if="row.deviceState === 0">离线</span>
            <span v-else-if="row.deviceState === 1">在线</span>
            <span v-else-if="row.deviceState === 2">异常</span>
          </template>
        </el-table-column>
        <el-table-column label="远程控制状态" prop="remoteControlId" min-width="100">
          <template #default="{row}">
            <span v-if="row.deviceState === 0">离线</span>
            <span v-else-if="row.remoteControlId === 0">手动</span>
            <span v-else-if="row.remoteControlId === 1">自动</span>
            <span v-else-if="row.remoteControlId === 2">柜门点动</span>
            <span v-else>离线</span>
          </template>
        </el-table-column>
		<el-table-column label="设备类型" align="center">
		  <template #default="{row}">
		    {{ deviceTypeMap[row.deviceType] }}
		  </template>
		</el-table-column>
        <el-table-column label="创建时间" prop="createTime" min-width="120"/>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button
                v-perms="['device:manage/index']"
                type="primary"
                link
            >
              <router-link
                  :to="{
                                    path: getRoutePath('device:manage/index'),
                                    query: {
                                        id: row.id
                                    }
                                }"
              >
                详情
              </router-link>
            </el-button>
            <el-button v-perms="['device:edit']" type="primary"
                       link @click="handleEdit(row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end mt-4">
        <pagination v-model="pager" @change="getLists"/>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup name="deviceLists">
import {usePaging} from '@/hooks/usePaging'
import {getRoutePath} from '@/router'
import {list} from '@/api/devicebysite'
import {ClientMap} from '@/enums/appEnums'
import EditPopup from '../edit.vue'
import {onMounted, ref} from "vue";

const route = useRoute()
const deviceStatus = ref()
const showEdit = ref(false)
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const queryParams = reactive({
  deviceName: '',
  channel: '',
  startTime: '',
  endTime: '',
  deviceStatus: ''
})

const deviceTypeMap = {
  '1': '通用版',
  '2': '2台潜污泵版'
};

const {pager, getLists, resetPage, resetParams} = usePaging({
  fetchFun: list,
  params: queryParams
})
const getStatusText = (deviceState) => {
  return deviceState.deviceState === 0 ? '异常' : '在线'
}
const handleAdd = async () => {
  showEdit.value = true
  await nextTick()
  editRef.value?.open('add')
}
const handleEdit = async (data: any) => {
  showEdit.value = true
  await nextTick()
  editRef.value?.open('edit')
  editRef.value?.getDetail(data)
}
onMounted(() => {
  queryParams.deviceStatus = route.query.deviceStatus || ""
  getLists()
})

// getLists()
</script>
